<template>
	<view>
		<view class="depositBox" v-if="depositRefundInfo != null" @click="depositRefund">
			<view>
				<text>车辆押金退款</text>
				<text>退款金额: ¥{{depositRefundInfo.refundAmount|filterNull}}</text>
				<text>退款时间: {{depositRefundInfo.refundTime|filterNull}}</text>
				<text>退款账户: {{depositRefundInfo.refundAccount|filterNull}}</text>
				<text>退款方式: {{depositRefundInfo.refundWay|filterNull}}</text>
			</view>
			
			<u-icon class="arrow" name="arrow-right"></u-icon>
		</view>
	</view>
</template>

<script>
	import {
		apiOrderDepositRefund
	} from '@/api/longOrder-api.js'
	export default {
		data() {
			return {
				orderNo: '',
				depositRefundInfo: {}
			}
		},
		onLoad(op) {
			this.orderNo = op.orderNo;
			this.getDepositInfo();
		},
		methods: {
			getDepositInfo() {
				apiOrderDepositRefund({
					orderNo: this.orderNo
				}).then(res => {
					this.depositRefundInfo = res.data;
				})
			},
			depositRefund() {
				uni.navigateTo({
					url: './longOrder-depositRefundDetail?orderNo=' + this.orderNo
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.depositBox {
		margin: 20upx;
		padding: 28upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: $bg-white-color;
		border-radius: 16upx;
		text {
			color: $text-color-66;
			font-size: 22upx;
			margin-bottom: 20upx;
			display: block;
		}

		text:nth-child(1) {
			color: $text-color-33;
			font-size: 28upx;
			font-weight: bold;
			margin-bottom: 30upx;
		}
	}
</style>
